<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="20" /></span>
    <strong>{{ $t("language.download.name") }}</strong>
    <span @click="$openPage('/kefu')"><img src="@/assets/img/kefu.png" alt="" /></span>
  </header>
  <main class="main">
    <img src="@/assets/img/world.png" alt="" srcset="" />
    <van-swipe :autoplay="6000" lazy-render touchable>
      <van-swipe-item v-for="image in imglist" :key="image">
        <Skeleton :loading="loadings">
          <template #ske>
            <van-skeleton-image style="width: 100%; height: 300px" />
          </template>
          <template #main> <img v-lazy="getImg(image)" /></template>
        </Skeleton>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <dl class="custom-indicator">
          <dd v-for="(item, index) in total" :class="[active == index ? 'active' : '']" :key="index"></dd>
        </dl>
      </template>
    </van-swipe>
    <van-button @click="installs" :disabled="btnloading" type="success">Download APP</van-button>
    <div class="icon" @click="showBottom = true">
      <van-icon color="#0a906c" name="arrow-double-left" /><span>Click to view installation</span>
    </div>
    <!-- 底部弹出 -->
    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '60%' }">
      <div class="popup">
        <h3>Installation Tutorial</h3>
        <img src="@/assets/img/download5.png" alt="" />
      </div>
    </van-popup>
  </main>
</template>
<script setup lang="ts">
// const { proxy } = getCurrentInstance();
import { ref, nextTick, onMounted, reactive } from "vue";
let loadings = ref(true);
let btnloading = ref(false);
let showBottom = ref(false);
let installs = () => {
  btnloading.value = true
  let fileLink = document.createElement('a');
  fileLink.href = 'https://cdn.ouro777.com/hot/download/slots_ouro_pro.apk';
  fileLink.style.display = "none"
  fileLink.setAttribute('download', "apk");
  document.body.appendChild(fileLink);
  fileLink.click();
  btnloading.value = false

}
onMounted(() => {
  nextTick(() => {
    // loadings.value = false;
    let time = setInterval(() => {
      loadings.value = false;
      clearInterval(time);
    }, 500);
  });
});
let imglist = reactive([
  "download1.png",
  "download2.png",
  "download3.png",
  "download4.png",
]);
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
</script>
<style scoped lang="scss">
header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    @include flex(row, space-between, center);
    display: block;

    img {
      width: 28px;
    }
  }
}

.main {
  padding: 45px 10px 90px;
  width: 100%;
  min-height: 100vh;
  @include flex(column, start, center);
  background-color: rgb(15, 15, 15);

  .head {
    padding-top: 10px;
    height: 44px;
    @include flex(row, flex-start, center);

    img {
      width: 36px;
      border-radius: 18px;
      margin-right: 10px;
    }

    div {
      margin-right: 16px;
      @include flex(column, center, flex-start);

      span {
        font-size: 16px;
        color: #999;
      }

      strong {
        font-size: 16px;
        color: #fff;
      }
    }

    .icon {
      @include flex(row, flex-start, flex-end);
      height: 100%;
      margin-bottom: -5px;

      .elicon {
        transition: all 1s;
        transform-origin: center;
      }

      .rotate {
        animation: rotate 2s cubic-bezier(0.5, 0, 0.5, 1) 1;
      }

      /* 定义一个名为rotate的动画 */
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(-360deg);
        }
      }
    }
  }

  :deep(.van-popup--bottom) {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    .popup {
      h3 {
        padding: 30px 0 20px;
      }

      width: 100%;
      @include flex(column, flex-start, center);

      img {
        width: 94%;
      }
    }
  }

  >img {
    margin: 20px auto;
    height: 40px;
  }

  .van-swipe {
    margin: 0 auto;
    width: 60% !important;

    .van-swipe-item {
      width: 100%;

      img {
        height: 357px;
        display: block;
        margin: 0 auto;
      }
    }

    .custom-indicator {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      @include flex(row, center, center);
      height: 26px;

      dd {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: rgb(122, 130, 140);
      }

      dd+dd {
        margin-left: 25px;
      }

      .active {
        background-color: rgb(153, 169, 190);
      }
    }
  }

  :deep(.van-button) {
    height: 52px;
    width: 100%;
    background: #0a906c;
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    border: 0;
    margin: 20px 0;
  }

  .icon {
    width: 100%;
    @include flex(row, center, center);

    :deep(.van-icon) {
      transform: rotate(90deg);
      margin-right: 20px;
    }

    span {
      color: #0a906c;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
